<!-- 门店管理 -->
<template>
  <div class="curriculum-resources-container">
    <header>
      <el-form ref="search" :model="searchForm" inline>
          <el-form-item label="门店名称" prop="companyName">
            <el-input v-model="searchForm.companyName" style="width:300px;" type="text" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="SearchReset('search')">重置</el-button>
            <el-button type="primary" :loading="searchLoading" @click="SearchSubmit">查询</el-button>
            <el-button type="primary" @click="CreateForm">新增</el-button>
          </el-form-item>
      </el-form>
    </header>
    <article>
      <Table
        :table-data="tableConfig.data.list"
        :table-column-options="tableConfig.columns"
        :table-data-total="tableConfig.data.total"
        :page="searchForm.page"
        :size="searchForm.size"
        @tableUpdate="CurrentChange"
      >
        <template #timerOperation="{data}">
          <span>{{data.createTime | formDate}}</span>
        </template>
        <template #userOperation="{data}">
          <div>
            <el-button type="text" @click="showShopUser(data)">门店人员</el-button>
          </div>
        </template>
        <template #shopStatus="{data}">
          <el-switch
            v-model="data.status"
            active-value="0"
            inactive-value="1"
            active-text="营业"
            inactive-text="歇业">
          </el-switch>
        </template>
        <template #operation="{ data }">
          <el-button type="text" @click="TableEdit(data)">编辑</el-button>
          <el-button type="text" @click="TableDelete(data)">删除</el-button>
        </template>
      </Table>
    </article>
    <!-- create/edit form modal -->
    <el-dialog
      title="门店管理"
      :visible.sync="modalConfig.show"
      :lock-scroll="true"
      :scrollable="true"
      width="50%"
      destroy-on-close
      :before-close="() => FormCancel('formData')"
    >
      <el-form ref="formData" :model="modalConfig.formData" label-width="120px">
        <el-form-item label="门店名称" prop="companyName">
          <el-input v-model="modalConfig.formData.companyName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="区域" >
          <el-col :span="6">
            <el-form-item prop="province">
              <el-select v-model="modalConfig.formData.province" @change="queryCity($event, 1)" placeholder="请选择省">
                <el-option
                  v-for="item in provinceOptions"
                  :key="item.id"
                  :label="item.areaName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="6">
            <el-form-item prop="city">
              <el-select v-model="modalConfig.formData.city" @change="queryRegion"  placeholder="请选择市">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.id"
                  :label="item.areaName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="6">
            <el-form-item prop="region">
              <el-select v-model="modalConfig.formData.region" placeholder="请选择区">
                <el-option
                  v-for="item in regionOptions"
                  :key="item.id"
                  :label="item.areaName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="运营时间" >
          <el-col :span="6">
            <el-form-item prop="startTime">
              <el-time-select
                placeholder="起始时间"
                :picker-options="{
                  start: '01:00',
                  step: '01:00',
                  end: '24:00'
                }"
                v-model="modalConfig.formData.startTime"
                >
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="6">
            <el-form-item prop="endTime">
              <el-time-select
                placeholder="结束时间"
                :picker-options="{
                  start: '01:00',
                  step: '01:00',
                  end: '24:00'
                }"
                v-model="modalConfig.formData.endTime"
                >
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="经营状态" prop="status">
          <el-switch
            v-model="modalConfig.formData.status"
            active-value="0"
            inactive-value="1"
            active-text="营业"
            inactive-text="歇业">
          </el-switch>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input type="textarea" v-model="modalConfig.formData.detailAddress" placeholder="请输入" />
        </el-form-item>
        <el-divider />
        <el-form-item style="text-align: right;">
          <el-button @click="FormCancel('formData')">取消</el-button>
          <el-button type="primary" @click="FormSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog
      title="门店人员管理"
      :visible.sync="UserShow"
      width="50%"
      destroy-on-close
      :before-close="() => CloseCancel()"
    >
      <el-transfer 
        :titles="[ '未关联人员', '已关联人员' ]" 
        v-model="shopUserList.isExistList" 
        :data="shopUserList.allList"
        :props="{
          key: 'id',
          label: 'realName'
        }"
        @change="handTransferChange"
      >
      </el-transfer>
    </el-dialog>


  </div>
</template>

<script>
import Table from '@/components/Table/index'
import meetApi from '../../api/meet.js'
export default {
  name: 'storeMange',
  components: {
    Table
  },
  data() {
    return {
      provinceOptions: [],
      cityOptions: [],
      regionOptions: [],
      d: ['54BLbwxv'],
      currentShopId: '',
      shopUserList: {
        existed: [],
        notExist: [],
        allList: [],
        isExistList: []
      },
      searchLoading: false,
      UserShow: false,
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        companyName: ''
      },
      tableConfig: {
        columns: [
          {
            label: '名称',
            prop: 'companyName',
            width: 100
          },
          {
            label: '地址',
            prop: 'detailAddress',
            width: 100
          },
          {
            label: '门店人员',
            columnType: true,
            slotName: 'userOperation',
            width: 100
          },
          {
            label: '添加日期',
            columnType: true,
            slotName: 'timerOperation',
            width: 100
          },
          {
            label: '操作',
            columnType: true,
            slotName: 'operation',
            width: 200
          }
        ],
        data: {}
      },
      modalConfig: {
        title: '门店管理',
        show: false,
        formData: {
          "companyName": "",
          "detailAddress": "",
          "province": "",
          "city": "",
          "region": "",
          "startTime": "",
          "endTime": "",
          "status": '0'
        }
      }
    }
  },
  mounted() {
    this.TableList()
    this.queryProvice()

  },
  filters: {
    formDate(key){
      const date = new Date(key);
      const formattedDate = date.toISOString().substr(0, 10); 
      return formattedDate
    }
  },
  methods: {
    handTransferChange(value, direction, movedKeys){
      console.log(value, direction, movedKeys,1111111)
      let arr = movedKeys.map(item => {
        return {
          userId: item,
          meetingShopId: this.currentShopId 
        }
      })
      // return;
      let params = {
        objs:  arr
      }
      if(direction =='right'){
        this.$yAxios({
          url: meetApi.saveMoreShopUser,
          data: params,
          loading: true
        }, info => {
          console.log(info)
        })
      }else if(direction =='left'){
        let removeList = []

        this.shopUserList.allList.map(item => {
          if(item.id == movedKeys[0]){

            removeList.push(item.relationId)
          }
        })
        console.log(removeList,3544543545645)
       
        this.$yAxios({
          url: meetApi.removeShopUser,
          data: {ids: removeList},
          loading: true
        }, info => {
          console.log(info)
        })
      }
    },
    TableList() {
      this.$yAxios({
        url: meetApi.storeList,
        data: this.searchForm,
        loading: true
      }, info => {
        this.tableConfig.data = info
      })
    },
    // 点击查询按钮
    SearchSubmit() {
      this.searchForm.pageNum = 1
      this.TableList()
    },
    // 点击重置按钮
    SearchReset(name) {
      this.$refs[name].resetFields()
      this.searchForm.pageNum = 1
      this.TableList()
    },
    // 点击新增按钮
    CreateForm() {
      this.modalConfig.show = true
      delete this.modalConfig.formData.id
    },
    // 分页数据回调
    CurrentChange(e) {
      this.searchForm.pageNum = e.page
      this.searchForm.pageSize = e.size
      this.TableList()
    },
    // 点击表格内删除
    TableDelete(data) {
      this.$confirm('你确定要删除此条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$yAxios({
          url: meetApi.storeRemove,
          data: {ids: [data.id]},
          loading: true
        }, info => {
          this.TableList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击表格内编辑
    TableEdit(data) {
      this.modalConfig.show = true
      this.$yAxios({
        url: meetApi.queryStoreById,
        data: {id: data.id},
        loading: true
      }, info => {
        console.log(info, 'edit--------')
        this.modalConfig.formData = info
        const { province, city } = info
        this.queryCity(province)
        this.queryRegion(city)
      })
    },
    // 点击表单确定
    async FormSubmit() {
      this.$yAxios({
        url: meetApi.storeSave,
        data: this.modalConfig.formData,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.TableList()
        this.$refs['formData'].resetFields()
        this.modalConfig.show = false
      })
    },
    // 点击表单取消
    FormCancel(name) {
      this.$refs[name].resetFields()
      this.modalConfig.show = false
    },
    CloseCancel(){
      this.UserShow = false
    },
    showShopUser(row){
      this.UserShow = true
      this.currentShopId = row.id
      this.queryShopUser(row.id)
    },
    queryShopUser(id){
      this.shopUserList.isExistList = []
      this.$yAxios({
        url: meetApi.queryShopUserDetail,
        data: {id: id},
        loading: true
      }, info => {


        info.existed.map(item => {
          this.shopUserList.isExistList.push(item.id)
        })
       
        console.log(info,'门店用户')
        this.shopUserList.allList = info.notExist.concat(info.existed)

      })
    },
    queryProvice(){
      this.$yAxios({
        url: meetApi.queryByParend,
        data: {pid: ''},
      }, info => {
        this.provinceOptions = info
      })
    },
    queryCity(id,type){
      if(type){

        this.modalConfig.formData.city = ''
        this.modalConfig.formData.region = ''
      }
      this.$yAxios({
        url: meetApi.queryByParend,
        data: {pid: this.modalConfig.formData.province},
        loading: true
      }, info => {
        this.cityOptions = info
      })
    },
    queryRegion(id){
      this.$yAxios({
        url: meetApi.queryByParend,
        data: {pid: this.modalConfig.formData.city},
        loading: true
      }, info => {
        this.regionOptions = info
      })
    }
  }
}
</script>
<style lang="less" scoped>
.curriculum-resources-container{
    padding: 20px;
}
</style>
